<template>
    <div>
        <div style="display: flex" v-if="client">
            <div style="flex:1" v-if="client.cpuInfo">
                <kv label="cpu 占用率">

                    <el-progress type="dashboard" :percentage="client.cpuInfo.us + client.cpuInfo.sy"
                                 :color="cpu_colors"></el-progress>

                </kv>
                <kv label="cpu 核数">
                    <el-tag effect="dark">{{client.cpuInfo.cores}}</el-tag>
                </kv>
            </div>

            <div style="flex:1" v-if="client.memInfo">
                <kv label="使用内存">
                    <el-progress type="dashboard" :percentage="client.mem_percent" :color="cpu_colors"></el-progress>
                </kv>
                <kv label="内存大小">{{client.memInfo.total | gb}}</kv>
                <!--                <kv label="可用内存">{{client.memInfo.avail}}</kv>-->
            </div>
        </div>

        <div style="display: flex">
            <kv label="客户端IP">{{client.requestClientIp}}</kv>
            <kv label="最后心跳时间">{{client.heartbeatLastAt}}</kv>
        </div>
        <my-list ref="list" :url="space_url" @loaded="procData"
                 :page-size="pageSize" :store="true"
                 style="width: 100%;margin-top:20px;">
            <el-table-column type="index" clign="center" width="50"></el-table-column>
            <!--<template slot-scope="scope"></template>-->
            <el-table-column align="center" label="分区" prop="spaceInfo.label"></el-table-column>
            <el-table-column align="center" label="挂载" prop="spaceInfo.mounted"></el-table-column>
            <el-table-column align="center" label="总大小">
                <template v-slot="{row}">{{ row.spaceInfo.total | gb }}</template>
            </el-table-column>
            <el-table-column align="center" label="已使用">
                <template v-slot="{row}">{{ row.spaceInfo.used | gb }}</template>
            </el-table-column>
            <el-table-column align="center" label="可用空间">
                <template v-slot="{row}">{{ row.spaceInfo.avail | gb }}</template>
            </el-table-column>
            <el-table-column align="center" label="使用率">
                <template v-slot="{row}">{{ row.spaceInfo.percent}}%</template>
            </el-table-column>

            <template #query-button>
                <el-button @click="fresh_click">刷新</el-button>
            </template>
        </my-list>
    </div>
</template>
<script>
    export default {
        components: {},
        props: {
            id: {type: String, default: ""}
        },
        watch: {
            id: {
                immediate: true, handler(v) {
                    {
                        this.space_url = "/site/b-site-client-space/list?site_id=" + this.id;

                        this.$http.post("/site/b-site-client/detail/" + this.id).then(res => {
                            var json = res.data.data;
                            if (json.memInfo.total) {
                                json.mem_percent = (parseInt(json.memInfo.used) * 100 / parseInt(json.memInfo.total)).ToRound();
                            } else {
                                json.mem_percent = 0;
                            }
                            this.client = json;
                        });
                    }
                }
            }
        },
        data() {
            return {
                space_url: "",
                client: {
                    cpuInfo: {},
                    memInfo: {},
                },
                cpu_colors: [
                    {color: '#13ce66', percentage: 20},
                    {color: '#1989fa', percentage: 40},
                    {color: '#b65efa', percentage: 60},
                    {color: '#fa8e26', percentage: 80},
                    {color: '#fa364a', percentage: 100}
                ]
            }
        },
        mounted() {

        },
        methods: {
            fresh_click() {
                this.$refs.list.loadData(1)

                this.$http.post("/site/b-site-client/detail/" + this.id).then(res => {
                    this.client = res.data.data;
                });
            },
            procData(res) {
                res.data.data.forEach(it => {
                    //如果是组合实体，设置 it.id=...
                });
            },
        }
    }
</script>
